<template>
  <view class="ditu">
    <view :style="{ height: height + 'px' }" class="map">
      <map style="width: 100%; height: 60%" :latitude="latitude" :longitude="longitude" :scale="scale" :markers="marker"> </map>
    </view>

    <view class="bottombox">
      <view class="address">
        <view class="left"><image src="/static/image/loca_icon.png" mode="scaleToFill" /></view>
        <view class="right">
          <view class="bold">{{ address_title }}</view>
          <view class="grey f-size m10">地址：{{ address }}</view>
        </view>
      </view>
      <view class="address">
        <view class="left"><image src="/static/image/loca_icon.png" mode="scaleToFill" /></view>
        <view class="bold">照片信息</view>
      </view>

      <view>
        <view v-show="!imageurl" class="photoinfo" @click="getPhotos">
          <image class="photo" src="/static/image/pic_icon.png" />
        </view>

        <view v-show="imageurl" class="photoinfo">
          <image v-show="imageurl" class="showphoto" :src="imageurl" />
          <view class="del" @click="del">×</view>
        </view>
      </view>

      <button class="m10 btn" @click="submit">提交</button>
    </view>
  </view>
</template>

<script>
import { getScreen, getToken, saveImage } from '@/service/auth'
import { signIn, signOut, isSignInToday } from '@/service/api/signin'
import { applyPermission } from '@/utils/permission'
export default {
  data() {
    return {
      longitude: '', //经度
      latitude: '', //纬度
      address: '', //详细地址
      address_title: '', //建筑物地址
      scale: 16, //缩放
      height: 0,
      marker: [
        {
          id: 0,
          latitude: '', //纬度
          longitude: '', //经度
          alpha: 1, //透明度
          width: 20,
          height: 30,
          iconPath: '/static/image/location.png',
        },
      ],
      imageurl: '',
      time: '',
      isSignIn: false,
    }
  },
  created() {
    const that = this
    const { height } = getScreen()
    this.height = height

    const result = applyPermission('scope.userLocation', '位置权限')

    if (result) {
      that.getLocation()
    }
   
  },
  onLoad(option) {
    this.getIsSignToday()
  },
  methods: {
    getLocation() {
      const that = this
      uni.getLocation({
        type: 'gcj02',

        geocode: true,
        isHighAccuracy: true,
        success: function (res) {
          that.longitude = res.longitude
          that.latitude = res.latitude
          // 标记
          that.marker[0].latitude = res.latitude
          that.marker[0].longitude = res.longitude
          console.log('当前位置的经度：' + res.longitude)
          console.log('当前位置的纬度：' + res.latitude)
          wx.request({
            url: `https://apis.map.qq.com/ws/geocoder/v1/?location=${res.latitude},${res.longitude}&key=UWHBZ-3AEKX-5U74E-7SFQY-BRJO3-O2BUV`,
            success(val) {
              console.log(val, '定位')
              that.address = val.data.result.address
              that.address_title = val.data.result.address_reference.landmark_l2.title
            },
          })
        },
      })
    },
    getPhotos() {
      const date = new Date()
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hour = date.getHours()
      const minute = date.getMinutes()
      const Seconds = date.getSeconds()
      const _this = this
      uni.chooseImage({
        count: 1, //默认9
        sizeType: [ 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ['camera'], //使用相机
        success: function (res) {
          _this.uniShowLoading()
          //   _this.imageurl = res.tempFilePaths[0]
          console.log('res.tempFilePaths[0=' + res.tempFilePaths[0])
          saveImage(res.tempFilePaths[0])
            .then(res => {
              _this.uniHideLoading()
              _this.imageurl = res
              _this.time = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day) + ' ' + (hour < 10 ? '0' + hour : hour) + ':' + (minute < 10 ? '0' + minute : minute) + ':' + (Seconds < 10 ? '0' + Seconds : Seconds)
            })
            .catch(err => {
              _this.uniHideLoading()
            })
        },
      })
    },
    del() {
      this.imageurl = ''
    },
    submit() {
      console.log(this.imageurl, '图片', this.address)
      console.log('提交')

      const _this = this
      _this.uniShowLoading()
      if (this.isSignIn) {
        const data = {
          signOutImgUrl: _this.imageurl,
          signOutTime: _this.time,
          lng: _this.longitude,
          lat: _this.latitude,
          place: _this.address,
        }
        //签退
        signOut(data)
          .then(res => {
            _this.uniHideLoading()
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
            uni.navigateBack({
              delta: 1,
            })
            _this.time = ''
            _this.imageurl = ''
          })
          .catch(err => {
            _this.uniHideLoading()
            uni.showToast({
              title: err.msg,
              icon: 'none',
            })
          })
      } else {
        //签到
        const data = {
          signInImgUrl: _this.imageurl,
          signInTime: _this.time,
          lng: _this.longitude,
          lat: _this.latitude,
          place: _this.address,
        }
        signIn(data)
          .then(res => {
            _this.uniHideLoading()
            uni.showToast({
              title: res.msg,
              icon: 'none',
            })
            uni.navigateBack({
              delta: 1,
            })
            _this.time = ''
            _this.imageurl = ''
          })
          .catch(err => {
            _this.uniHideLoading()
            uni.showToast({
              title: err.msg,
              icon: 'none',
            })
          })
      }
    },
    getIsSignToday() {
      isSignInToday()
        .then(res => {
          this.isSignIn = res.data === 1
          uni.setNavigationBarTitle({
            title: this.isSignIn ? '签退打卡' : '签到打卡', // 设置页面标题为'页面标题'
          })
          console.log('isSignIn' + this.isSignIn)
        })
        .catch(err => {
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.ditu {
  position: relative;

  .map {
    background-color: white;
    padding: 10rpx;
    border-radius: 50rpx;
    map {
      border-radius: 20rpx;
    }
  }
  .bottombox {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* width: 100%; */
    height: 41%;
    border-top-left-radius: 40rpx;
    border-top-right-radius: 40rpx;
    background: white;
    padding: 40rpx;
    .address {
      display: flex;
      align-items: baseline;
      .left {
        margin-right: 10rpx;
        image {
          width: 20rpx;
          height: 20rpx;
        }
      }
    }
    .photoinfo {
      height: 150rpx;
      width: 150rpx;
      border-radius: 20rpx;
      position: relative;
      margin-top: 10rpx;
      .photo {
        height: 150rpx;
        width: 150rpx;
      }
      .showphoto {
        border-radius: 20rpx;
        width: 150rpx;
        height: 150rpx;
      }
      .del {
        /* background-color: red; */
        color: white;
        width: 30rpx;
        height: 30rpx;
        position: absolute;
        right: 10rpx;
        top: 5rpx;
        text-align: center;
        align-items: center;
        justify-content: center;
        display: flex;
        font-size: 25rpx;
        line-height: 30rpx;
      }
    }
    .f-size {
      font-size: 26rpx;
    }
    .bold {
      font-weight: bold;
    }
    .m10 {
      margin: 20rpx 0;
    }
    .btn {
      background-color: #2f6fef;
      height: 80rpx;
      line-height: 80rpx;
      color: white;
      border-radius: 50rpx;
      margin-top: 50rpx;
    }
  }
}
</style>
